<template>
  <div class="fixed-center flex-col">
    <div class="w-56px h-56px my-36px">
      <div class="relative h-full animate-spin">
        <div
            v-for="(item, index) in loadingClasses"
            :key="index"
            class="absolute w-16px h-16px loading-item rounded-8px animate-pulse"
            :class="item"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const loadingClasses = [
  'left-0 top-0',
  'left-0 bottom-0 animate-delay-500',
  'right-0 top-0 animate-delay-1000',
  'right-0 bottom-0 animate-delay-1500'
];
</script>

<style scoped lang="scss">
.loading-item{
  background-color: rgb(100,108,255);
}
</style>
